<page-header model="ctrl.navModel"></page-header>

<div class="page-container page-body">
  <div class="page-action-bar">
		<div class="gf-form gf-form--grow">
			<label class="gf-form--has-input-icon">
				<input type="text" class="gf-form-input width-20" ng-model="ctrl.searchQuery" ng-change="ctrl.onQueryUpdated()" placeholder="通过名称或类型进行筛选" />
				<i class="gf-form-input-icon fa fa-search"></i>
			</label>
			<layout-selector />
		</div>
		<div class="page-action-bar__spacer"></div>
		<a class="btn btn-success" href="https://grafana.com/plugins?utm_source=grafana_plugin_list" target="_blank" style="display: none">
      在 Grafana.com 上查找更多插件
		</a>
	</div>

	<section class="card-section" layout-mode>

		<ol class="card-list" >
			<li class="card-item-wrapper" ng-repeat="plugin in ctrl.plugins">
				<a class="card-item" href="plugins/{{plugin.id}}/edit">
					<div class="card-item-header">
						<div class="card-item-type">
							<i class="icon-gf icon-gf-{{plugin.type}}"></i>
							{{plugin.type}}
						</div>
						<div class="card-item-notice" ng-show="plugin.hasUpdate">
							<span bs-tooltip="plugin.latestVersion">有可用更新！</span>
						</div>
					</div>
					<div class="card-item-body">
						<figure class="card-item-figure">
							<img ng-src="{{plugin.info.logos.small}}">
						</figure>
						<div class="card-item-details">
							<div class="card-item-name">{{plugin.name}}</div>
							<div class="card-item-sub-name">By {{plugin.info.author.name}}</div>
						</div>
					</div>
				</a>
			</li>
		</ol>
	</section>
</div>
